// Copyright (c) Microsoft. All rights reserved.

@import 'variables';

// TODO: Replace all explicit HEX codes with variable names

$themes: (
  dark: (
    // Functional colors
    colorAlert: $colorAlert,
    colorFailed: $colorFailed,
    colorWarning: $colorWarning,
    colorSystem: $colorSystem,
    colorError: $colorError,

    // App - START
    colorSelectionText: $colorWhite,
    colorSelectionBg: #60AAFF,
    // App - END

    // Grid - START
    colorGridScrollBar: $colorCharcoal,
    colorGridRowBackground: $colorMidnight,
    colorGridCellText: $colorWhite,
    colorGridRowBorder: #565454,
    colorGridRowHoverBackground: #1a1c1f,
    colorGridRowSelectedBackground: #232629,
    colorGridSelectedRowBorder: #60aaff,
    colorGridHeaderText: $colorSmoke,

    colorCellRendererSvgFill: $colorSmoke,
    colorCellRendererSvgFillHighlight: $colorWhite,
    colorCellRendererText: $colorSmoke,
    colorCellRendererTextHighlight: $colorWhite,

    colorGlimmerSvgFill: #f4f4f4,

    gridSortIcon: '~assets/icons/sort_dark.svg',
    gridAscIcon: '~assets/icons/sort_a2z_dark.svg',
    gridDescIcon: '~assets/icons/sort_z2a_dark.svg',
    // Grid - END

    // Btn - START
    colorBtnOutlineFocus: $colorSmoke,

    colorBtnText: $colorWhite,
    colorBtnBackground: transparent,
    colorBtnSvgFill: $colorSmoke,

    colorBtnTextHover: $colorWhite,
    colorBtnBackgroundHover: transparent,
    colorBtnSvgFillHover: $colorWhite,

    colorBtnTextActive: $colorWhite,
    colorBtnBackgroundActive: transparent,
    colorBtnSvgFillActive: $colorSmoke,

    colorBtnTextDisabled: $colorAsh,
    colorBtnBackgroundDisabled: transparent,
    colorBtnSvgFillDisabled: $colorAsh,

    colorBtnPrimaryText: $colorNoir,
    colorBtnPrimaryBackground: $colorSmoke,
    colorBtnPrimarySvgFill: $colorNoir,

    colorBtnPrimaryTextHover: $colorWhite,
    colorBtnPrimaryBackgroundHover: $colorGraphite,
    colorBtnPrimarySvgFillHover: $colorWhite,

    colorBtnPrimaryTextActive: $colorSmoke,
    colorBtnPrimaryBackgroundActive: $colorCharcoal,
    colorBtnPrimarySvgFillActive: $colorSmoke,

    colorBtnPrimaryTextDisabled: $colorSmoke,
    colorBtnPrimaryBackgroundDisabled: transparent,
    colorBtnPrimarySvgFillDisabled: $colorSmoke,
    // Btn - END

    // Hyperlink - START
    colorHyperlinkText: $colorDarkLinkRest,
    colorHyperlinkTextHover: $colorDarkLinkHover,
    colorHyperlinkTextFocus: $colorDarkLinkFocus,
    colorHyperlinkOutlineFocus: $colorDarkLinkBorder,
    colorHyperlinkTextDisabled: $colorDarkLinkDisabled,
    // Hyperlink - END

    // Pill - START
    colorPillBackground: #3F3F3F,
    colorPillBackgroundHover: #136BFB,
    colorPillText: $colorWhite,
    colorPillTextHover: $colorWhite,
    colorPillSvg: $colorWhite,
    colorPillSvgHover: $colorWhite,
    colorPillBackgroundSvg: #2D2F33,
    colorPillBackgroundSvgHover: #005A9E,
    // Pill - END

    // Page Content Colors - START
    colorContentBackground: $colorNoir,
    colorPageContentBackground: $colorNoir,
    colorContentText: $colorWhite,
    colorContentTextDim: $colorSmoke,

    colorFlyoutBackground: $colorNoir,
    colorFlyoutText: $colorSmoke,
    colorFlyoutSectionBorder: $colorLead,
    colorFlyoutDropShadow: rgba(0, 0, 0, 0.6),
    colorFlyoutConfirmationText: $colorWhite,

    colorPropertyGridBorder: $colorLead,
    colorPropertyGridBottomBorder: $colorCharcoal,
    colorScrollBarBackground: $colorMidnight,
    colorScrollBarButton: $colorLead,
    // Page Content Colors - END

    // Header Colors - START
    colorHeaderDropdown: $colorNoir,
    colorHeaderText: $colorSmoke,
    colorHeaderIconHover: $colorWhite,
    colorHeaderItemBgHover: $colorMidnight,
    colorHeaderBorderColor: $colorLead,
    colorHeaderItemContainerBorderColor: $colorLead,
    // Header Colors - END

    // Nav Colors - START
    colorNavBg: $colorCharcoal,
    colorNavText: $colorWhite,
    colorNavItemBgHover: $colorMidnight,
    colorNavItemIcon: $colorSmoke,
    colorTabBorder: $colorWhite,
    // Nav Colors - END

    // Context Menu Colors - START
    colorContextMenuBg: $colorNoir,
    colorContextMenuBtnBgHover: $colorMidnight,
    colorContextMenuBtnTextHover: $colorWhite,
    colorContextMenuBorderColor: $colorLead,
    colorContextMenuBtnSvgFill: $colorWhite,

    colorContextSearchBg: $colorWhite,
    colorContextSearchBorderColor: $colorWhite,
    colorContextSearchTextColor: $colorNoir,
    // Context Menu Colors - END

    // Dashboard Panel Colors - START
    colorDashboardMapPopupText: $colorNoir,
    colorDashboardPanelText: $colorWhite,
    colorDashboardPanelHeaderBg: $colorCharcoal,
    colorDashboardPanelContentBg: $colorMidnight,
    colorDashboardPanelOverlayBg: rgba(0, 0, 0, .5),
    colorDashboardPanelErrorOverlayBg: $colorMidnight,
    // Dashboard Panel Colors - END

    // Toggle Btn Colors - START
    colorEnableToggleBackground: $colorGunmetal,
    colorToggle: $colorWhite,
    colorDisableToggleBackground: $colorNoir,
    colorDisabledLine: $colorSmoke,
    // Toggle Btn Colors - END

    // Forms - START
    colorFileUploadText: $colorNoir,

    colorSelectBackground: $colorNoir,
    colorSelectOptionFocusedBg: $colorCharcoal,
    colorSelectDisabledText: $colorAsh,
    colorSelectBorderColor: $colorStone,
    colorSelectText: $colorWhite,
    colorSelectPlaceholderText: $colorStone,

    colorInputText: $colorSmoke,
    colorInputPlaceholderText: $colorStone,
    colorInputBorderColor: $colorGraphite,
    colorInputBorderHoverColor: $colorSmoke,
    colorDisabledInputBg: $colorGraphite,
    colorSelectedRadioBtnCenter: $colorWhite,

    colorFormActionsBorderColor: $colorGraphite,
    colorDurationLabelText: $colorSmoke,
    // Forms - END

    // Tooltip - START
    colorTooltipText: $colorWhite,
    colorTooltipBackground: $colorNoir,
    colorTooltipBorder: #60AAFF,
    colorTooltipDropShadow: rgba(0, 0, 0, 0.6),
    // Tooltip - END

    // Modal - START
    colorModalText: $colorWhite,
    colorModalBackground: $colorNoir,
    colorModalBorder: #60AAFF,
    colorModalDropShadow: rgba(0, 0, 0, 0.6),
    // Modal -  END
  ),
  light: (
    // Functional colors
    colorAlert: $colorAlert,
    colorWarning: #f4ca2c,
    colorSystem: $colorSystem,
    colorError: $colorError,

    // App - START
    colorSelectionText: #333,
    colorSelectionBg: #136BFB,
    // App - END

    // Grid - START
    colorGridScrollBar: $colorCharcoal,
    colorGridRowBackground: $colorWhite,
    colorGridCellText: #333,
    colorGridRowBorder: #cacaca,
    colorGridRowHoverBackground: #f2f2f2,
    colorGridRowSelectedBackground: #dadada,
    colorGridSelectedRowBorder: #136bfb,
    colorGridHeaderText: #666,

    colorCellRendererSvgFill: #333,
    colorCellRendererSvgFillHighlight: #333,
    colorCellRendererText: #333,
    colorCellRendererTextHighlight: #333,

    colorGlimmerSvgFill: #212121,

    gridSortIcon: '~assets/icons/sort_light.svg',
    gridAscIcon: '~assets/icons/sort_a2z_light.svg',
    gridDescIcon: '~assets/icons/sort_z2a_light.svg',
    // Grid - END

    // Btn - START
    colorBtnOutlineFocus: $colorSmoke,

    colorBtnText: #333,
    colorBtnBackground: transparent,
    colorBtnSvgFill: #666,

    colorBtnTextHover: #333,
    colorBtnBackgroundHover: transparent,
    colorBtnSvgFillHover: #333,

    colorBtnTextActive: #333,
    colorBtnBackgroundActive: transparent,
    colorBtnSvgFillActive: #333,

    colorBtnTextDisabled: $colorAsh,
    colorBtnBackgroundDisabled: transparent,
    colorBtnSvgFillDisabled: $colorAsh,

    colorBtnPrimaryText: #333,
    colorBtnPrimaryBackground: #f4f4f4,
    colorBtnPrimarySvgFill: #666,

    colorBtnPrimaryTextHover: #333,
    colorBtnPrimaryBackgroundHover: #eaeaea,
    colorBtnPrimarySvgFillHover: #666,

    colorBtnPrimaryTextActive: #333,
    colorBtnPrimaryBackgroundActive: #c8c8c8,
    colorBtnPrimarySvgFillActive: #666,

    colorBtnPrimaryTextDisabled: #a6a6a6,
    colorBtnPrimaryBackgroundDisabled: #f4f4f4,
    colorBtnPrimarySvgFillDisabled: #a6a6a6,
    // Btn - END

    // Hyperlink - START
    colorHyperlinkText: $colorLightLinkRest,
    colorHyperlinkTextHover: $colorLightLinkHover,
    colorHyperlinkTextFocus: $colorLightLinkFocus,
    colorHyperlinkOutlineFocus: $colorLightLinkBorder,
    colorHyperlinkTextDisabled: $colorLightLinkDisabled,
    // Hyperlink - END

    // Pill - START
    colorPillBackground: #DADADA,
    colorPillBackgroundHover: #136BFB,
    colorPillText: $colorNoir,
    colorPillTextHover: $colorWhite,
    colorPillSvg: $colorNoir,
    colorPillSvgHover: $colorWhite,
    colorPillBackgroundSvg: #C8C8C8,
    colorPillBackgroundSvgHover: #005A9E,
    // Pill - END

    // Page Content Colors - START
    colorContentBackground: #f2f2f2, // Grey100
    colorPageContentBackground: $colorWhite,
    colorContentText: #333,
    colorContentTextDim: #666,

    colorFlyoutBackground: #fff,
    colorFlyoutText: #333,
    colorFlyoutSectionBorder: #c8c8c8,
    colorFlyoutDropShadow: rgba(0, 0, 0, 0.1),
    colorFlyoutConfirmationText: $colorNoir,

    colorPropertyGridBorder: #c8c8c8,
    colorScrollBarBackground: #f2f2f2,
    colorScrollBarButton: #ccc,
    // Page Content Colors - END

    // Header Colors - START
    colorHeaderBg: $colorNoir,
    colorHeaderDropdown: $colorNoir,
    colorHeaderText: $colorSmoke,
    colorHeaderIconHover: $colorWhite,
    colorHeaderItemBgHover: $colorMidnight,
    colorHeaderBorderColor: #c8c8c8,
    colorHeaderItemContainerBorderColor: $colorLead,
    // Header Colors - END

    // Nav Colors - START
    colorNavBg: $colorCharcoal,
    colorNavText: $colorWhite,
    colorNavItemBgHover: $colorMidnight,
    colorNavItemIcon: $colorSmoke,
    colorTabBorder: #333,
    // Nav Colors - END

    // Context Menu Colors - START
    colorContextMenuBg: #f2f2f2,
    colorContextMenuBtnBgHover: #eaeaea,
    colorContextMenuBtnTextHover: #333,
    colorContextMenuBtnSvgFill: #666,
    colorContextMenuBorderColor: #c8c8c8,

    colorContextSearchBg: $colorWhite,
    colorContextSearchBorderColor: #c8c8c8,
    colorContextSearchTextColor: $colorNoir,
    // Context Menu Colors - END

    // Dashboard Panel Colors - START
    colorDashboardMapPopupText: $colorNoir,
    colorDashboardPanelText: #333,
    colorDashboardPanelHeaderBg: $colorWhite,
    colorDashboardPanelContentBg: $colorWhite,
    colorDashboardPanelOverlayBg: rgba(255, 255, 255, .5),
    colorDashboardPanelErrorOverlayBg: $colorWhite,
    // Dashboard Panel Colors - END

    // Toggle Btn Colors - START
    colorEnableToggleBackground: $colorGunmetal,
    colorToggle: $colorWhite,
    colorDisableToggleBackground: $colorNoir,
    colorDisabledLine: $colorSmoke,
    // Toggle Btn Colors - END

    // Forms - START
    colorFileUploadText: $colorNoir,

    colorSelectBackground: $colorWhite,
    colorSelectOptionFocusedBg: #dadada,
    colorSelectDisabledText: $colorAsh,
    colorSelectBorderColor: #c8c8c8,
    colorSelectText: #333,
    colorSelectPlaceholderText: #666,

    colorInputText: #333,
    colorInputPlaceholderText: $colorStone,
    colorInputBorderColor: $colorGraphite,
    colorInputBorderHoverColor: $colorSmoke,
    colorDisabledInputBg: $colorGraphite,
    colorSelectedRadioBtnCenter: $colorGraphite,

    colorFormActionsBorderColor: $colorGraphite,
    colorDurationLabelText: $colorSmoke,
    // Forms - END

    // Tooltip - START
    colorTooltipText: #333,
    colorTooltipBackground: $colorWhite,
    colorTooltipBorder: #136BFB,
    colorTooltipDropShadow: rgba(0, 0, 0, 0.1),
    // Tooltip - END

    // Modal - START
    colorModalText: #333,
    colorModalBackground: $colorWhite,
    colorModalBorder: #136BFB,
    colorModalDropShadow: rgba(0, 0, 0, 0.1),
    // Modal -  END
  )
);
